From: Miguel Angel Mulero Martinez <migmul@gmail.com>
Date: Wed, 4 May 2022 08:53:35 +0000 (+0200)
Subject: luci-material-theme: replace margin by gap in ifacebadge
X-Git-Url: http://git.openwrt.org/%22https:/collectd.org//%22/%22https:/collectd.org/%22?a=commitdiff_plain;h=d31bcbc2d40e75f67ac3a8a96af0c6b875507aba;p=project%2Fluci.git

luci-material-theme: replace margin by gap in ifacebadge

Material is a "flex" theme. Better to use "gap" in place of "margin" to
add some space between elements inside "flex" elements.

This fixes the problem specially when there are text elements inside the
"flex" and don't hurt when there are images.

Signed-off-by: Miguel Angel Mulero Martinez <migmul@gmail.com>
(cherry picked from commit 1cd615787a648e3a8fda5d8c20b38b42a62a6d16)
---

diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
index 612dae52eb..a797a065d8 100644
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -1836,6 +1836,7 @@ body.modal-overlay-active #modal_overlay {
 
 .ifacebadge {
 	display: inline-flex;
+	gap: .2rem;
 	padding: .5rem .8rem;
 	border-bottom: thin solid #ccc;
 	background: #eee;
@@ -1852,11 +1853,6 @@ td > .ifacebadge,
 .ifacebadge > img {
 	display: inline-block;
 	align-self: flex-start;
-	margin: 0 .2rem;
-}
-
-.ifacebadge > img + img {
-	margin: 0 .2rem 0 0;
 }
 
 .network-status-table {